<template>
  <div>
    <el-dialog :title="flag == 'add' ? '添加景点' : '编辑景点'" :visible.sync="dialogVisible" width="40%">
      <el-form style="margin-right: 50px" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
        <el-form-item label="景点名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="景点英文名" prop="english_name">
          <el-input v-model="ruleForm.english_name"></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="city_name">
          <el-input v-model="ruleForm.city_name"></el-input>
        </el-form-item>
        <el-form-item label="等级" prop="level">
          <el-input v-model="ruleForm.level"></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="synopsis">
          <el-input v-model="ruleForm.synopsis"></el-input>
        </el-form-item>
        <el-form-item label="游玩时间" prop="play_time">
          <el-date-picker v-model="ruleForm.play_time" type="datetime" placeholder="选择日期时间" align="right"> </el-date-picker>
        </el-form-item>
        <el-form-item label="预计费用" prop="cost">
          <el-input v-model="ruleForm.cost"></el-input>
        </el-form-item>
        <el-form-item label="交通" prop="traffic">
          <el-input v-model="ruleForm.traffic"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="贴士" prop="tips">
          <el-input v-model="ruleForm.tips"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone_number">
          <el-input v-model="ruleForm.phone_number"></el-input>
        </el-form-item>
        <el-form-item label="官网" prop="official_website">
          <el-input v-model="ruleForm.official_website"></el-input>
        </el-form-item>
        <el-form-item label="上午允许最大人数" prop="am_allow_people">
          <el-input v-model="ruleForm.am_allow_people"></el-input>
        </el-form-item>
        <el-form-item label="下午允许最大人数" prop="pm_allow_people">
          <el-input v-model="ruleForm.pm_allow_people"></el-input>
        </el-form-item>
        <el-form-item label="所属区" prop="district">
          <el-input v-model="ruleForm.district"></el-input>
        </el-form-item>
        <el-form-item label="镇/县" prop="county">
          <el-input v-model="ruleForm.county"></el-input>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="ruleForm.longitude"></el-input>
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="ruleForm.latitude"></el-input>
        </el-form-item>
        <el-form-item label="上传音频" prop="latitude">
          <el-upload class="upload-demo" name="radio" :headers="headers" drag action="" multiple :on-progress="progress" :on-success="handleActivityImg" :before-upload="beforeUpload">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传音频文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addScenic } from '@/api/scenicApi.js'

export default {
  data() {
    return {
      dialogVisible: false,
      rules: {}, //表单验证规则
      headers: { 'content-type': 'multipart/form-data' },
      ruleForm: {
        // id: '',
        // name: '',
        // city_name: '',
        // level: '',
        // english_name: '',
        // title: '',
        // synopsis: '',
        // traffic: '',
        // address: '',
        // phone_number: '',
        // official_website: '',
        // district: '',
        // county: '',
        // longitude: 0,
        // latitude: 0,
        // play_time: '',
        // cost: '',
        // am_allow_people: '',
        // pm_allow_people: '',
      },
    }
  },
  props: ['flag'],
  methods: {
    open(data) {
      this.ruleForm = data
      this.dialogVisible = true
    },
    //上传音频之前，可以限制一些上传的文件限制
    beforeUpload(file) {
      // var testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
      //  const extension = testmsg === 'mp3'
      //  if(!extension){
      //    this.$message({
      //      message:"上传文件只能是mp3格式！",
      //      type:'error'
      //    })
      //  }
      //  return extension;
    },
    //上传音频时
    progress(event, file, fileList) {},
    //上传音频之后
    handleActivityImg(response, file, fileList) {},
    //添加景点确认按钮
    handleClick() {
      let formData = new FormData()
      formData.append('name', this.ruleForm.name)
      formData.append('english_name', this.ruleForm.english_name)
      formData.append('city_name', this.ruleForm.city_name)
      formData.append('level', this.ruleForm.level)
      formData.append('title', this.ruleForm.title)
      formData.append('synopsis', this.ruleForm.synopsis)
      formData.append('traffic', this.ruleForm.traffic)
      formData.append('address', this.ruleForm.address)
      formData.append('phone_number', this.ruleForm.phone_number)
      formData.append('official_website', this.ruleForm.official_website)
      formData.append('district', this.ruleForm.district)
      formData.append('county', this.ruleForm.county)
      formData.append('longitude', this.ruleForm.longitude)
      formData.append('latitude', this.ruleForm.latitude)
      formData.append('play_time', this.ruleForm.play_time)
      formData.append('cost', this.ruleForm.cost)
      formData.append('am_allow_people', this.ruleForm.am_allow_people)
      formData.append('pm_allow_people', this.ruleForm.pm_allow_people)
      if (this.flag == 'add') {
        this.addEvent(formData)
      } else {
        this.editEvent()
      }
      //   this.$http.post('manager/scenicSpot/addScenicSpot', formData).then((res) => {
      //     console.log(res, '55')
      //   })
    },
    addEvent(data) {
      addScenic(data).then((res) => {})
    },
    editEvent() {},
  },
}
</script>

<style>
</style>